<template>
    <view class="search-bar l-container-class">
        <slot name="before" />
        <view v-if="frontText" class="icon-container" mut-bind:tap="handleTapFrontText">
            <text class="city">{{ frontText }}</text>
            <l-icon name="down" color="#333" size="22" />
        </view>
        <view :class="'search-input l-class ' + ('search-input-' + shape)" :style="'background-color:' + bgColor">
            <slot v-if="custom" name="icon" />
            <l-icon v-else :name="icon" :size="iconSize" :color="iconColor" l-class="l-icon-class" />
            <input
                :confirm-type="confirmType"
                :class="'input l-input-class ' + ('input' + TextAlign)"
                :value="valueClone"
                :type="type"
                :password="type === 'password'"
                :placeholder="placeholder"
                :maxlength="maxlength"
                placeholder-class="pls-class l-placeholder-class"
                :placeholder-style="placeholderStyle"
                :disabled="disabled"
                :focus="focus"
                @input="handleInputChange"
                @focus="handleInputFocus"
                @blur="handleInputBlur"
                @confirm="handleInputConfirm"
            />
            <view class="close-wrap" v-if="clear && valueClone" mut-bind:tap="onClearTap">
                <view class="close">
                    <l-icon name="close" color="#fff" size="15" />
                </view>
            </view>
        </view>
        <view v-if="showCancel" class="cancel l-cancel-class" mut-bind:tap="onCancel">
            {{ cancelText }}
        </view>
        <slot name="after" />
    </view>
</template>

<script>
import lInput from '../input/index';
import lIcon from '../icon/index';
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            TextAlign: '',
            cancelTextClone: '',
            valueClone: ''
        };
    },

    externalClasses: ['l-class', 'l-container-class', 'l-placeholder-class', 'l-icon-class', 'l-input-class', 'l-cancel-class'],
    mixins: [validator],

    options: {
        multipleSlots: true
    },

    props: {
        confirmType: {
            type: String,
            default: 'search'
        },
        placeholder: String,
        cancelText: {
            type: String,
            default: '取消'
        },
        frontText: String,
        custom: Boolean,
        value: String,
        type: String,
        icon: {
            type: String,
            default: 'research'
        },
        iconColor: {
            type: String,
            default: '#bdbdbd'
        },
        iconSize: {
            type: String,
            default: '28'
        },
        bgColor: {
            type: String,
            default: '#f3f3f3'
        },
        showCancel: {
            type: Boolean,
            default: true
        },
        shape: {
            type: String,
            default: 'primary',
            options: ['circle', 'primary']
        },
        textAlign: {
            type: String,
            default: 'left',
            options: ['left', 'right']
        },
        focus: Boolean,
        clear: {
            type: Boolean,
            default: true
        },
        maxlength: {
            type: Number,
            default: 140
        },
        disabled: Boolean,
        placeholderStyle: String
    },

    methods: {
        onCancel() {
            this.$emit(
                'lincancel',
                {
                    detail: {}
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },
        handleInputChange(e) {
            const { detail: t = {} } = e;
            const { value: l = '' } = t;
            this.setData({
                valueClone: l
            });
            this.$emit('linchange', {
                detail: t
            });
        },
        handleInputFocus(e) {
            this.$emit('linfocus', {
                detail: e.detail
            });
        },
        handleInputBlur(e) {
            this.$emit('linblur', {
                detail: e.detail
            });
        },
        handleInputConfirm(e) {
            const { detail: t = {} } = e;
            const { value: l = '' } = t;
            this.setData({
                valueClone: l
            });
            this.$emit('linconfirm', {
                detail: t
            });
        },
        onClearTap(e) {
            this.setData({
                valueClone: ''
            });
            this.$emit(
                'linclear',
                {
                    detail: e.detail
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },
        handleTapFrontText(e) {
            this.$emit('linfronttap', {
                detail: e.detail
            });
        }
    },

    created: function () {}
};
</script>
<style>
.search-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    width: 100%;
}
.search-input {
    height: 60rpx;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    padding-left: 30rpx;
    box-sizing: border-box;
}
.search-input-primary {
    border-radius: 8rpx;
}
.search-input-circle {
    border-radius: 30rpx;
}
.cancel {
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    width: 60rpx;
    justify-content: center;
    height: 60rpx;
    margin-left: 15rpx;
}
.input {
    height: 40rpx;
    line-height: 40rpx;
    flex: 1;
    margin-left: 15rpx;
    font-size: 28rpx;
    color: #666;
}
.input-center {
    text-align: center;
}
.input-left {
    text-align: left;
}
.close-wrap {
    padding: 10rpx;
}
.close {
    height: 30rpx;
    width: 30rpx;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding-top: 3rpx;
    box-sizing: border-box;
    margin-right: 15rpx;
}
.pls-class {
    color: #bdbdbd;
    font-size: 28rpx;
}
.icon-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 15rpx;
}
.city {
    font-size: 28rpx;
    color: #333;
    margin-right: 10rpx;
}
</style>
